<template>
  <div class="safe">
    <dl class="safe.info">
      <dt class="info-title">您的基础信息</dt>
      <dd>
        <ul class="account-info">
          <li>
            <span class="label">账户名</span>
            <span class="value">{{ username }}</span>
          </li>
          <li>
            <span class="label">密码</span>
            <span class="value">{{ maskedPassword }}</span>
          </li>
          <li>
            <span class="label">邮箱</span>
            <span class="value">{{ email }}</span>
          </li>
        </ul>
      </dd>
      <div>
        <p class="set-title">您的登录设置</p>
        <div class="set-content">
          <span class="set-content-left">保持登录信息</span
          ><span class="set-content-mid"
            >是否开启保持登录功能, 下次访问更便捷</span
          >
          <div class="set-content-right">
            <label>
              <input type="radio" value="on" v-model="keepLogin" /> 开启
            </label>
            <label style="margin-left: 10px">
              <input
                @click="handleClose()"
                type="radio"
                value="off"
                v-model="keepLogin"
              />
              关闭
            </label>
          </div>
        </div>
      </div>
    </dl>
  </div>
</template>

<script  scoped>
export default {
  data() {
    // 优先查找 localStorage，没有再查 sessionStorage
    let userInfo =
      localStorage.getItem("userInfo") || sessionStorage.getItem("userInfo");
    userInfo = userInfo ? JSON.parse(userInfo) : {};
    return {
      keepLogin: "on",
      username: userInfo.username || "",
      password: userInfo.password || "",
      email: userInfo.email || "",
    };
  },
  computed: {
    maskedPassword() {
      // 显示与密码长度相同数量的星号
      return this.password ? "*".repeat(this.password.length) : "";
    },
  },
  methods: {
    handleClose() {
      if (window.confirm("确定要关闭保持登录信息吗？")) {
        // 取出用户信息
        const userInfo = localStorage.getItem("userInfo");
        // 存到 sessionStorage
        if (userInfo) {
          sessionStorage.setItem("userInfo", userInfo);
          localStorage.removeItem("userInfo");
        }
        // 可选：页面刷新
        // location.reload();
      }
    },
  },
};
</script>

<style>
.safe {
  width: 100%;
  margin: 60px auto;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 32px 24px;
}
.info-title {
  padding: 12px 0 0 20px;
  line-height: 30px;
  font-weight: 700;
  border-top: 1px solid #d5e5f4;
  margin-top: -1px;
  zoom: 1;
  position: relative;
}
.account-info {
  padding-left: 40px;
}
.detail-info dd {
  text-align: center;
  padding: 0 20px 14px;
}
.account-info .label {
  float: left;
  width: 76px;
}
.safe .set-title {
  zoom: 1;
  border-top: 1px solid #d5e5f4;
  font-weight: 700;
  line-height: 30px;
  margin-top: -1px;
  padding: 12px 0 0 20px;
  position: relative;
}

.safe .set-content {
  line-height: 40px;
  margin-bottom: 50px;
  margin-top: 15px;
}
.safe .set-content .set-content-left {
  float: left;
  line-height: 18px;
  margin: 0 36px;
  text-align: left;
  width: 110px;
}
.safe .set-content .set-content-mid {
  float: left;
  line-height: 18px;
  margin-left: -18px;
  margin-right: 36px;
  text-align: left;
}
.safe .set-content .set-content-right {
  float: right;
  margin-right: 150px;
}
</style>